<template>
  <el-dialog
    :title="roleForm.id?'编辑角色':'新增角色'"
    :visible="dialogVisble"
    width="30%"
    @close="closeDialog"
  >
    <el-form ref="roleForm" :model="roleForm" :rules="rules" label-width="100px">
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="roleForm.name" style="width:80%" />
      </el-form-item>
      <el-form-item label="角色描述" prop="description">
        <el-input v-model="roleForm.description" style="width:80%" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="addRole">确 定</el-button>
    </div>
  </el-dialog> 
</template>

<script>
import {addRoleAPI, getRoleIdAPI, updateRoleIdAPI} from '@/api/setting'
export default {
  name: 'AddRole',
  props: {
    dialogVisble: {
      type: Boolean
    }
  },
  data(){
    return {
      // 新增角色弹框
      roleForm: {
        name: '',
        description: ''
      },
      // 对角色名称和角色描述的验证
      rules: {
        name: [{required: 'true', message: '角色名字必填', trigger: 'blur'}],
        description: [{required: 'true', message: '角色描述必填', trigger: 'blur'}]
      }
    }
    
  },
  methods: {
    // 关闭弹框
    closeDialog(){
      this.resetForm()

    },
    // 手动清除表单数据
    resetForm(){
      this.roleForm = {
        name: '',
        description: ''
      }
      this.$refs.roleForm.resetFields()
      this.$emit('close-dialog')
    },
    // 新增角色
    addRole(){
      this.$refs.roleForm.validate(async valid => {
        if (valid) {
          // 在这里根据roleForm判断有无id，来调用编辑的接口或新增的接口
          if (this.roleForm.id){
            await updateRoleIdAPI(this.roleForm)
          } else {
            await addRoleAPI(this.roleForm)
          }
          this.$message.success(`${this.roleForm.id?'编辑角色成功':'新增角色成功'}`)
          // // 关闭弹框
          // this.closeDialog()
          // 清空表单数据
          // 手动清空表单数据
          this.resetForm()
          // 更新列表
          this.$emit('update-list')
        
        }
      })
    },
    async getRoleData(id){
      // 通过ref直接在父组件中拿到子组件的实例对象，直接调用子组件的方法将角色id传递过来，然后就可以直接在子组件中发送请求
      this.roleForm = await getRoleIdAPI(id)

    }

  }



}
</script>

<style>
</style>
